<template>
  <div
      class="page"
      v-infinite-scroll="()=>{}"
      infinite-scroll-distance="10"
      :infinite-scroll-disabled="true"
  >
    <el-form :model="produceForm" ref="produceFormRef" label-width="120px">
      <el-form-item label="农产品图片">
        <el-upload
            class="uploadGoodsP"
            :action="staticResourcesUrl+'/produce/uploadImg'"
            ref="uploadRef"
            :auto-upload="false"
            :multiple="true"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
            list-type="picture-card"
            :file-list="imgList"
        >
          <el-icon><Plus /></el-icon>
        </el-upload>
        <el-dialog v-model="dialogVisible">
          <img :src="dialogImageUrl" alt="Preview Image" style="max-width: 40vw;max-height: 40vh" />
        </el-dialog>
      </el-form-item>
      <el-form-item label="农产品名称" prop="produceName" >
        <el-input
            v-model.trim="produceForm.produceName"
            placeholder="请输入您要上架的农产品名称"
            :clearable="true"
            maxlength="32"
            show-word-limit
        />
      </el-form-item>
      <el-form-item label="农产品类型">
        <el-select v-model="produceForm.produceType" placeholder="请选择" >
          <el-option
              v-for="item in produceTypeList"
              :key="item.code"
              :label="item.name"
              :value="item.code"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="农产品价格" porop="price">
        <el-input-number
            controls-position="right"
            :clearable="true"
            v-model="produceForm.price"
            :precision="2"
            :step="1.0"
            :min="0"
            :max="999.99" />
      </el-form-item>
      <el-form-item label="农产品份数" porop="count">
        <el-input-number
            controls-position="right"
            :clearable="true"
            v-model="produceForm.count"
            :precision="0"
            :step="1"
            :min="0"
            :max="999" />
      </el-form-item>
      <el-form-item label="农产品描述" porop="describe">
        <el-input
            v-model="produceForm.describe"
            type="textarea"
            placeholder="为您的农产品做一个简要的描述"
            maxlength="255"
            show-word-limit
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submit">提交更新</el-button>
        <el-button type="danger" @click="resetForm">重置表单</el-button>
      </el-form-item>
    </el-form>
    <el-divider />
    <el-switch
        v-model="showGrowthData"
        active-color="#13ce66"
        inactive-color="#ff4949"
        active-text="显示生长记录表"
        inactive-text="隐藏生长记录表"
    />
    <el-tabs v-model="activeName" v-if="showGrowthData" type="border-card">
      <el-tab-pane label="萌芽期记录表" ><GrowthRecord v-if="activeName==='0'" :growth-stage="activeName" :produce-i-d="uuid" /></el-tab-pane>
      <el-tab-pane label="生长期记录表" ><GrowthRecord v-if="activeName==='1'" :growth-stage="activeName" :produce-i-d="uuid" /></el-tab-pane>
      <el-tab-pane label="成熟期记录表" ><GrowthRecord v-if="activeName==='2'" :growth-stage="activeName" :produce-i-d="uuid" /></el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import GrowthRecord from "@/components/form/GrowthRecord.vue";
import {ref, reactive, getCurrentInstance} from 'vue'
import request from "@/http/request";

const {useRoute} = require("vue-router");

export default {
  name: "UpdateProduce",
  components: {
    GrowthRecord,
  },
  data() {
    return {
      produceTypeList: [],
      showGrowthData: false,
      imgList: [],
      produceFormRef: ref(null),
      dialogImageUrl: "",
      dialogVisible: false,
      produceForm: reactive({
        produceName: "",
        produceType: "",
        describe: "",
        price:0,
        count:0,
      }),
    }
  },
  methods: {
    getProduceType() {
      request({
        url: "/produce/getProduceType",
        method: "get",
      }).then((response) => {
        if (response.code === 200) {
          this.produceTypeList = response.data;
        } else {
          this.$tipUtil.errTip(response.msg);
        }
      })
    },
    getProduceDetail() {
      const _this = this;
      if (_this.uuid!=="") {
        request({
          "url": "produce/getProduceDetail",
          "method": "post",
          data: {
            uuid: _this.uuid,
          }
        }).then( (response)=> {
          if (response.code === 200) {
            _this.produceForm.produceName = response.data[0].data.name;
            _this.produceForm.produceType = response.data[0].data.produceType;
            _this.produceForm.price = Number(response.data[0].data.price);
            _this.produceForm.count = Number(response.data[0].data.count);
            _this.produceForm.describe = response.data[0].data.describe;
            _this.imgList = response.data[0].imgList.map(function (item) {
              item.url = _this.staticResourcesUrl + item.img;
              return item;
            });
          } else {
            _this.$tipUtil.errTip(response.msg);
          }
        })
      }
    },
    handlePictureCardPreview(uploadFile) {
      this.dialogImageUrl = uploadFile.url
      this.dialogVisible = true
    },
    handleRemove(uploadFile){
      if (uploadFile.img) {
        request({
          url: "/produce/deleteImg",
          method: "post",
          data: {
            fileName: uploadFile.img.substring(uploadFile.img.lastIndexOf("/")+1),
          },
        }).then((response) => {
          if (response.code === 200) {
            this.$tipUtil.successTip(response.msg);
          } else {
            this.$tipUtil.errTip(response.msg);
          }
        })
      }
    },
    submitUpload() {
      const _this = this;
      if (_this.uuid!==""){
        const formData = new FormData();
        // 你可以使用FormData.append来添加键/值对到表单里面；
        _this.imgList.forEach((file) => {
          if (file.raw) {
            formData.append('file', file.raw);
          }
        })
        if (formData.has('file')) {
          formData.append("uuid", _this.uuid);
          request({
            "url": "produce/uploadImg",
            "method": "post",
            data: formData,
          }).then( (response)=> {
            if (response.code === 200) {
              _this.getProduceDetail();
              _this.$tipUtil.successTip(response.msg);
            } else if (response.code === 521) {
              _this.getProduceDetail();
              _this.$tipUtil.warningTip(response.msg);
            } else {
              _this.$tipUtil.errTip(response.msg);
            }
          })
        }
      }
    },
    resetForm: function() {
      this.$refs['produceFormRef'].resetFields();
      this.produceForm.price = 0;
      this.produceForm.describe = "";
    },
    submit() {
      request({
        url: "/produce/updateProduceDetail",
        method: "post",
        data: {
          uuid: this.uuid,
          produceName: this.produceForm.produceName,
          produceType: this.produceForm.produceType,
          price: this.produceForm.price.toString(),
          count: this.produceForm.count.toString(),
          describe: this.produceForm.describe,
        },
      }).then((response) => {
        if (response.code === 200) {
          this.submitUpload();
          this.$tipUtil.successTip(response.msg);
        } else {
          this.$tipUtil.errTip(response.msg);
        }
      })
    },
  },
  setup() {
    const activeName = ref('0');
    const { appContext : { config: { globalProperties } } } = getCurrentInstance();
    const staticResourcesUrl = globalProperties.$staticResourcesUrl;
    const route = useRoute();
    const uuid = route.params.uuid;
    return {
      activeName,
      staticResourcesUrl,
      uuid,
    }
  },
  mounted() {
    this.getProduceType();
    this.getProduceDetail();
  }
}
</script>

<style scoped>
.page {
  height: 86vh;
  margin: 0;
  padding: 20px 0;
}
</style>